<template>
    <div class="contract-container">
        <div class="back-button" @click="back"> 返回 </div>
        <!-- 第一页 -->
        <div class="page1">
            <h1 class="contract-title">{{ contractTitle }}</h1>
            <div class="contract-logo">
                <span style="font-size: 50px;line-height: 80px;font-weight: bold;">劳<br>动<br>合<br>同</span>
            </div>
            <div class="contract-info">
                <div class="info-group">
                    <div>
                        <p>甲方(用人单位)</p>
                        <p>名称: <input type="text" v-model="employer.name"></p>
                        <p>住所: <input type="text" v-model="employer.address"></p>
                        <p>法定代表人<input type="text" v-model="employer.legalRepresentative1"></p>
                        <p>(主要负责人): <input type="text" v-model="employer.legalRepresentative"></p>
                        <p>联系人: <input type="text" v-model="employer.contactPerson"></p>
                        <p>联系电话: <input type="text" v-model="employer.contactPhone"></p>
                    </div>
                </div>
                <div class="info-group">
                    <div>
                        <p>乙方(员工)</p>
                        <p>姓名: <input type="text" v-model="employee.name"></p>
                        <p>性别: <input type="text" v-model="employee.gender"></p>
                        <p>身份证（护照）</p>
                        <p>号码: <input type="text" v-model="employee.idNumber"></p>
                        <p>住址: <input type="text" v-model="employee.address"></p>
                        <p>联系电话: <input type="text" v-model="employee.contactPhone"></p>
                    </div>
                </div>
            </div>
            <p class="compiled-by">{{ compiledBy }}</p>
        </div>
        <!-- 第二页，插入的部分 -->
        <div class="page">
            <!-- 引言部分 -->
            <div class="section-intro">
                <p>{{ introText }}</p>
            </div>
            <!-- 合同期限部分 -->
            <div class="section">
                <h2>一、合同期限</h2>
                <div class="sub-section">
                    <p>(一) 甲乙双方同意按以下第 <span class="highlight"><input type="number" v-model="contractPeriodType" min="1"
                                max="3"></span> 种方式确定本合同期限。</p>
                    <ol>
                        <!-- v-if="contractPeriodType === '1'" -->
                        <li>
                            有固定期限：从 <input type="number" v-model="fixedStartYear" min="0" max="9999"
                                style="width: 40px;"> 年
                            <input type="number" v-model="fixedStartMonth" min="1" max="12" style="width: 30px;"> 月
                            <input type="number" v-model="fixedStartDay" min="1" max="31" style="width: 30px;"> 日起至
                            <input type="number" v-model="fixedEndYear" min="0" max="9999" style="width: 40px;"> 年
                            <input type="number" v-model="fixedEndMonth" min="1" max="12" style="width: 30px;"> 月
                            <input type="number" v-model="fixedEndDay" min="1" max="31" style="width: 30px;"> 日止。
                        </li>
                        <li>
                            无固定期限：从 <input type="number" v-model="indefiniteStartYear" min="0" max="9999"
                                style="width: 40px;"> 年
                            <input type="number" v-model="indefiniteStartMonth" min="1" max="12" style="width: 30px;"> 月
                            <input type="number" v-model="indefiniteStartDay" min="1" max="31" style="width: 30px;"> 日起。
                        </li>
                        <li>
                            以完成一定工作任务为期限：从
                            <input type="" placeholder="/" v-model="taskStartYear" min="0" max="9999"
                                style="width: 40px;" disabled class="disabled-input"> 年
                            <input type="" placeholder="/" v-model="taskStartMonth" min="1" max="12"
                                style="width: 30px;" disabled class="disabled-input"> 月
                            <input type="" placeholder="/" v-model="taskStartDay" min="1" max="31" style="width: 30px;"
                                disabled class="disabled-input"> 日起至工作任务完成时止。
                            完成工作任务的标志是
                            <input type="text" v-model="taskCompletionSign" placeholder="/" disabled
                                style="width: 400px;">。
                        </li>
                    </ol>
                </div>
                <div class="sub-section">
                    <p>(二) 试用期限</p>
                    <p>双方同意按以下第 <span class="highlight">
                            <input type="number" v-model="probationType" min="1" max="2">
                        </span> 种方式确定试用期期限（试用期包括在合同期内）：</p>
                    <ol>
                        <!-- v-if="probationType === '1'" -->
                        <li>无试用期</li>
                        <!-- v-if="probationType === '2'" -->
                        <li>
                            试用期从 <span class="highlight">{{ probationStartYear }}</span> 年 <span class="highlight">{{
                                probationStartMonth }}</span> 月 <span class="highlight">{{ probationStartDay }}</span>
                            日起至 <span class="highlight">{{ probationEndYear }}</span> 年 <span class="highlight">{{
                                probationEndMonth }}</span> 月 <span class="highlight">{{ probationEndDay }}</span> 日止。
                        </li>
                    </ol>
                    <p class="note">{{ probationNote }}</p>
                </div>
            </div>
            <!-- 工作内容和工作地点部分 -->
            <div class="section">
                <h2>二、工作内容和工作地点</h2>
                <p>乙方的工作内容(岗位或工种) <span class="highlight"><input type="text" v-model="jobContent"></span>。</p>
                <p>乙方的工作地点 <span class="highlight"><input type="text" style="width: 400px;"
                            v-model="jobLocation"></span>
                    <span class="highlight">{{ additionalLocationInfo }}</span>。
                </p>
            </div>
            <!-- 工作时间和休息休假部分 -->
            <div class="section">
                <h2>三、工作时间和休息休假</h2>
                <div class="sub-section">
                    <p>(一) 甲乙双方同意按以下第 <span class="highlight"><input type="number" min="1" max="3">{{ workTimeType
                            }}</span> 种方式确定乙方的工作时间。</p>
                    <ol>
                        <!-- v-if="workTimeType === '1'" -->
                        <li>
                            标准工时制，即每日工作 <span class="highlight">&emsp;{{ standardWorkHoursPerDay }}&emsp;</span>
                            小时（不超过8小时），每周工作
                            <span class="highlight">&emsp;{{ standardWorkHoursPerWeek }}&emsp;</span>
                            小时（不超过40小时），每周至少休息一日。
                        </li>
                        <!-- v-if="workTimeType === '2'" -->
                        <li>
                            不定时工作制，即经劳动保障行政部门审批，乙方所在岗位实行不定时工作制。
                        </li>
                        <!-- v-if="workTimeType === '3'" -->
                        <li>
                            综合计算工时工作制，即经劳动保障行政部门审批，乙方所在岗位实行综合计算工时工作制。
                        </li>
                    </ol>
                </div>
                <p>(二) 甲方由于生产经营需要延长工作时间的，按《劳动法》第四十一条执行。</p>
                <span style="position: relative;">
                    <p>(三) 乙方依法享有法定节假日、婚假、产假、丧假等假期。</p>
                    <p>(四) 乙方的其他休息休假安排 <span
                            class="highlight">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;{{
                                otherRestArrangements }}</span>。</p>
                    <span
                        style="position: absolute;top: -30px;left: 100px;width: 30%;height: 100%;transform: rotate(-13deg);border-bottom: 1px solid black;">

                    </span>
                </span>
                <h2>四、劳动报酬</h2>
                <p>（一）乙方正常工作时间的工资标准（计算加班工资基数），按下列第<input type="number" min="1" max="3">种形式执行，并不得低于当地最低工资标准及本单位集体合同约定的标准。
                </p>
            </div>
        </div>
        <!-- 第三页 -->
        <div class="page">
            <!-- 劳动报酬部分 -->
            <div class="section">
                <div class="content-item">
                    <p style="margin-left: 20px;">1. 计时工资：<input type="text" style="width: 75px;"
                            v-model="salary.timedSalary" placeholder="计时工资">
                        元/月；</p>
                    <p style="margin-left: 20px;">2. 计件工资：<input type="text" style="width: 80px;"
                            v-model="salary.pieceworkSalary" placeholder="">
                        （70%以上职工在正常工作时间内可以完成的，本项约定为成立）；</p>
                    <p style="margin-left: 20px;">3. 其他形式：<input style="width: 300px;" type="text"
                            v-model="salary.otherForm" placeholder="">。</p>
                </div>
                <div class="content-item">
                    <p>（二）乙方试用期工资为 <input type="text" style="width: 85px;" v-model="salary.probationSalary"
                            placeholder="试用期工资">
                        元/月（不得低于第（一）款约定工资的80%或单位同一岗位最低档工资，并不得低于本市最低工资标准）。</p>
                </div>
                <div class="content-item">
                    <p>（三）甲方依法安排乙方加班的，应按《劳动法》第四十四条的规定支付加班工资。</p>
                </div>
                <div class="content-item">
                    <p>（四）工资必须以法定货币支付，不得以实物或其他有价证券等形式替代货币支付。</p>
                </div>
                <div class="content-item">
                    <p>（五）甲方与乙方可以依法根据本单位的经营状况、物价指数情况，经过双方协商或者通过集体协商，确定工资正常增长的具体办法。</p>
                </div>
                <div class="content-item">
                    <p>（六）甲方给乙方发放工资的时间为：每月 <input type="number" style="width: 65px;" v-model="salary.paymentDate"
                            placeholder="工资发放日期">
                        日。如遇节假日或休息日，应提前到最近的工作日支付。</p>
                </div>
            </div>
            <!-- 社会保险和福利待遇部分 -->
            <div class="section">
                <h2>五、社会保险和福利待遇</h2>
                <div class="content-item">
                    <p>（一）甲乙双方按照国家和省、市有关规定，参加社会保险，缴纳社会保险费。</p>
                </div>
                <div class="content-item">
                    <p>（二）乙方患病或非因工负伤,甲方应按国家和省、市的有关规定给予乙方享受医疗期和医疗期待遇。</p>
                </div>
                <div class="content-item">
                    <p>（三）乙方患职业病、因工负伤的，甲方按《职业病防治法》、《工伤保险条例》等有关法律法规的规定执行。</p>
                </div>
                <div class="content-item">
                    <span style="position: relative;">
                        <p>（四）甲方为乙方提供以下福利待遇<span class="value">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                                &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                                {{ welfare.benefits }}</span>。</p>
                        <span
                            style="position: absolute;top: -30px;left: 155px;width: 45%;height: 100%;transform: rotate(-12deg);border-bottom: 1px solid black; "></span>
                    </span>
                </div>
            </div>
            <!-- 劳动保护、劳动条件和职业危害防护部分 -->
            <div class="section">
                <h2>六、劳动保护、劳动条件和职业危害防护</h2>
                <div class="content-item">
                    <p>（一）甲方按国家和省、市有关劳动保护规定，提供符合国家安全卫生标准的劳动作业场所和必要的劳动防护用品，切实保护乙方在生产工作中的安全和健康。</p>
                </div>
                <div class="content-item">
                    <p>（二）甲方按国家和省、市有关规定，做好女员工和未成年工的特殊劳动保护工作。</p>
                </div>
                <div class="content-item">
                    <p>（三）乙方从事 <span class="value" style="font-size: 18px; font-weight: bold;">{{ protection.workType
                            }}</span> 作业，可能产生 <span class="value">&emsp;{{
                                protection.hazards }}&emsp;</span> 职业危害，甲方应采取 <span class="value">&emsp;{{
                                protection.measures }}&emsp;</span>
                        防护措施，并每年组织乙方健康检查 <span class="value">&emsp;{{ protection.checkTimes }}&emsp;</span> 次。</p>
                </div>
                <div class="content-item">
                    <p>（四）乙方有权拒绝甲方的违章指挥，强令冒险作业；对甲方危害生命安全和身体健康的行为，乙方有权要求改正或向有关部门举报。</p>
                </div>
            </div>
            <!-- 规章制度部分 -->
            <div class="section">
                <h2>七、规章制度</h2>
                <div class="content-item">
                    <p>（一）甲方依法制定的规章制度，应当告知乙方。</p>
                </div>
                <div class="content-item">
                    <p>（二）乙方应遵守国家和省、市有关法律法规和甲方依法制定的规章制度，按时完成工作任务，提高职业技能，遵守安全操作规程和职业道德。</p>
                </div>
                <div class="content-item">
                    <p>（三）乙方自觉遵守国家和省、市计划生育的有关规定。</p>
                </div>
            </div>
            <div class="section">
                <h2>八、合同的变更、解除、终止</h2>
                <div class="content-item">
                    <p>（一）符合《劳动合同法》规定的条件或者经甲、乙双方协商一致，可以变更劳动合同的相关内容或</p>
                </div>
            </div>
        </div>

        <!-- 第四页 -->
        <div class="page">
            <div class="section">
                <div class="content-item">
                    <p>者解除固定期限合同、无固定期限合同和以完成一定工作为期限合同。</p>
                </div>
                <div class="content-item">
                    <p>（二）除因乙方不胜任工作，甲方可以依法适当调整其工作内容外，变更劳动合同，双方应当采用书面形式。变更后的合同文本双方各执一份。</p>
                </div>
                <div class="content-item">
                    <p>（三）《劳动合同法》规定的终止条件出现，终止本劳动合同。</p>
                </div>
            </div>

            <div class="section">
                <h2>九、经济补偿金、医疗补助费的发放</h2>
                <div class="content-item">
                    <p>解除或者终止本合同，经济补偿金、医疗补助费等发放按《劳动合同法》和国家、省、市有关规定执行。</p>
                </div>
            </div>

            <div class="section">
                <h2>十、合同解除和终止手续</h2>
                <div class="content-item">
                    <p>甲乙双方解除和终止本合同的，乙方应按双方约定，办理工作交接等手续。甲方应依法向乙方出具书面证明，并在十五日内为乙方办理档案和社会保险关系转移手续。</p>
                </div>
            </div>

            <div class="section">
                <h2>十一、争议处理</h2>
                <div class="content-item">
                    <p>甲乙双方发生劳动争议的，应先协商解决。协商不成的，可以向本单位工会寻求解决或向依法设立的劳动争议调解组织申请调解；也可以依法申请劳动争议仲裁、提起诉讼。</p>
                </div>
            </div>

            <div class="section">
                <h2>十二、双方认为需要约定的其他事项:</h2>
                <div class="content-item">
                    <p class="underline-text">
                        （一）乙方岗位调整：乙方同意，甲方有权根据企业生产经营需要（包括但不限于企业转产，重大技术革新，经营方式、业务、组织框架调整等），在公司范围内调整乙方的岗位和工作地点，该调整不得降低乙方工资待遇。
                    </p>
                </div>
                <div class="content-item">
                    <p class="underline-text">（二）劳动合同解除与终止，应按《中华人民共和国劳动合同法》执行。此外，双方同意出现下列情形时，劳动合同终止。 </p>
                </div>
                <div class="content-item">
                    <p class="underline-text"> &emsp;1、乙方有以下情形的，甲方有权解除合同，并不予支付经济补偿金和赔偿金： </p>
                    <ol class="custom-list">
                        <li class="underline-text" v-for="(item, index) in notCompensation" :key="index">{{ item }}</li>
                        <!-- <li class="underline-text">在试用期间被证明不符合录用条件者；</li>
                        <li class="underline-text">无正当理由，拒绝服从管理者合理指挥者；</li>
                        <li class="underline-text">经常不认真工作，工作懒惰、懈怠、马虎、漫不经心或经常缺勤者（每月累计3次或半年内累计5次以上即为经常）；</li>
                        <li class="underline-text">聚众斗殴或打人致伤者（人数5人以上或受伤人员药费200元以上）；</li>
                        <li class="underline-text">贪污公款、盗窃公司物品或私人钱物者（该情形不限金额均为情节恶劣）；</li>
                        <li class="underline-text">提供或使用虚假证件资料者，包括提供或使用虚假的身份证件、学历证件者、职称证件、工作经历或者借用他人职称证件者；</li>
                        <li class="underline-text">因故意或重大过失造成公司3000元以上经济损失者；</li>
                        <li class="underline-text">不遵守上级命令或违反安全规定，引起重大事故者；</li>
                        <li class="underline-text">造谣惑众，破坏团结，煽动他人闹事、怠工者；</li>
                        <li class="underline-text">利用职权或工作之便索贿受贿者；</li>
                        <li class="underline-text">在公司内（包含厂区和宿舍）聚众赌博者；</li>
                        <li class="underline-text">公开抵毁公司名誉和信用或利用公司名誉在外招摇撞骗，使公司受到损害者；</li> -->
                    </ol>
                </div>
            </div>
        </div>

        <!-- 第5页 -->
        <div class="page">
            <!-- 违规及解约等相关内容部分 -->
            <div class="section">
                <ul style="font-size: 12px;    padding-left: 60px;list-style-type: none;text-decoration: underline;">
                    <li v-for="(item, index) in contractTerminationRules" :key="index">
                        {{ item }}
                    </li>
                </ul>
            </div>
            <div class="section">
                <h2 class="title">（三）惩罚</h2>
                <div class="subsection">
                    <p class="underline-text">对员工的处罚以公告形式实行，公告期内员工未提异议的，视为接受该处罚。</p>
                    <h2 class="sub-title">1、按照员工违纪程度将违纪处分方式规定为四个级别，分别是：</h2>
                    <ul
                        style="font-size: 12px;    padding-left: 60px;list-style-type: none;text-decoration: underline;">
                        <li v-for="(level, index) in disciplinaryLevels" :key="index">
                            {{ level }}
                        </li>
                    </ul>
                    <h2 class="sub-title"> 2、乙方有下列情形之一的将给予警告处分：</h2>
                    <ul
                        style="font-size: 12px;    padding-left: 60px;list-style-type: none;text-decoration: underline;">
                        <li v-for="(warningSituation, index) in warningSituations" :key="index">
                            {{ warningSituation }}
                        </li>
                    </ul>
                    <!-- <p>
                        乙方：（签名）<input type="text">
                    </p> -->

                </div>
            </div>
        </div>

        <!-- 第6页 -->
        <div class="page">
            <!-- 继续的惩罚相关内容部分 -->
            <div class="section">
                <ul style="font-size: 12px;    padding-left: 60px;list-style-type: none;text-decoration: underline;">
                    <li v-for="(item, index) in warningSituationsContinue" :key="index">
                        {{ item }}
                    </li>
                </ul>
            </div>
            <div class="section">
                <h2 class="title">3、乙方有下列情形之一的，将给予记小过处分：</h2>
                <ul style="font-size: 12px;    padding-left: 60px;list-style-type: none;text-decoration: underline;">
                    <li v-for="(item, index) in minorOffenseSituations" :key="index">
                        {{ item }}
                    </li>
                </ul>
            </div>
            <div class="section">
                <h2 class="title"> 4、乙方有下列情形之一的，将给予大过处分：</h2>
                <ul style="font-size: 12px;    padding-left: 60px;list-style-type: none;text-decoration: underline;">
                    <li v-for="(item, index) in seriousOffenseSituations" :key="index">
                        {{ item }}
                    </li>
                </ul>
            </div>
            <div class="section">
                <h2 class="title">（四）调职、降级、降职、开除处分</h2>
                <div class="subsection">
                    <p class="underline-text" v-for="(item, index) in disciplinaryActionOfTransfer" :key="index">{{ item
                    }}</p>
                    <!-- <p class="underline-text">2、三次警告相当于记小过一次，三次记小过相当于记大过一次。</p> -->
                </div>
            </div>
            <div class="section">
                <h2 class="title">（五）乙方承诺</h2>
                <p class="underline-text">乙方承诺：在入职时及在职期间向甲方提供的所有个人及工作资料均为真实、合法、有效的。</p>
            </div>
        </div>

        <!-- 第7页 -->
        <div class="page">
            <div class="section">
                <p class="underline-text">乙方同意遵守甲方各项规章制度（包括本合同中列明的及其他乙方签阅的）。 </p>
            </div>

            <div class="section">
                <h2>十三、其它</h2>
                <div class="content-item" v-for="(item, index) in other" :key="index">
                    <p>{{ item }}</p>
                </div>
                <!-- <div class="content-item" >
                    <p>（一）若甲方向乙方按入职时提交的身份证住址邮寄信函或资料，乙方未及时查收并未向甲方做任何反馈所导致的后果全部由乙方承担。</p>
                </div>
                <div class="content-item">
                    <p>（二）本合同未尽事宜或合同条款与现行法律法规规定有抵触的，按现行法律法规执行。</p>
                </div>
                <div class="content-item">
                    <p>（三）本合同自甲乙双方签字盖章之日起生效，涂改或未经书面授权代签无效。 </p>
                </div>
                <div class="content-item">
                    <p>（四）本合同一式两份，甲乙双方各执一份。 </p>
                </div> -->
            </div><br><br>
            <div class="section">
                <div class="content-item">
                    <p>合同签署前，双方确认：</p>
                </div>
                <div class="content-item">
                    <p>甲方已就本合同第十二条约定的事项对乙方进行解释说明，乙方已经完整阅读并理解全部合同条款，双方同意履行全部合同义务。 </p><br><br><br><br><br><br>
                </div>
            </div>
            <div class="section">
                <div class="content-item">
                    <p style="display: flex;justify-content: space-between;"><span>甲方：（盖章）</span> <span>乙方：（签名）<input
                                style="border: 0px;" type="text" :disabled="isView"></span></p><br><br>
                </div>
            </div>
            <div class="section">
                <div class="content-item">
                    <p>法定代表人：</p>
                </div>
                <div class="content-item">
                    <p>（主要负责人）</p><br><br><br>
                </div>
            </div>
            <div class="section">
                <div class="content-item">
                    <p style="display: flex;justify-content: space-between;"><span><input
                                style="border: 0px; width: 40px;" min="0" max="9999" type="number"
                                :disabled="isView">年<input style="border: 0px; width: 30px;" min="1" max="12"
                                type="number" :disabled="isView">月<input style="border: 0px; width: 30px;" min="1"
                                max="31" type="number" :disabled="isView">日 </span>
                        <span><input style="border: 0px; width: 40px;" min="0" max="9999" type="number"
                                :disabled="isView">年<input style="border: 0px; width: 30px;" min="1" max="12"
                                type="number" :disabled="isView">月<input style="border: 0px; width: 30px;" min="1"
                                max="31" type="number" :disabled="isView">日 </span>
                    </p>
                </div>
            </div>
        </div>

        <!-- 在最后一页 <div class="page"> 的末尾添加 -->
        <div class="operation-buttons" v-if="!isView">
            <el-button type="primary" icon="el-icon-printer" @click="printForm">打印</el-button>
            <el-button type="primary" @click="handleSubmit">保存合同</el-button>
        </div>

    </div>
</template>

<script>
import { saveOrUpdateApi, getInfoApi } from '@/api/employee-contract'
import { formatDate, DATE_FORMAT } from '@/utils/date'

export default {
    data() {
        return {
            id: null,
            contractTitle: '深圳市宝安区',
            employer: {
                name: '',
                address: '',
                legalRepresentative1: '',
                legalRepresentative: '',
                contactPerson: '',
                contactPhone: ''
            },
            employee: {
                name: '',
                gender: '',
                idNumber: '',
                address: '',
                contactPhone: ''
            },
            compiledBy: '深圳市宝安区劳动局编制',
            // 劳动报酬相关数据
            salary: {
                timedSalary: '10000',
                pieceworkSalary: '',
                otherForm: '',
                probationSalary: '10000',
                paymentDate: '25'
            },
            // 福利待遇相关数据
            welfare: {
                benefits: ''
            },
            // 劳动保护相关数据
            protection: {
                workType: '对身体健康无伤害',
                hazards: '/',
                measures: '/',
                checkTimes: '/'
            },
            introText: "根据《中华人民共和国劳动法》（以下简称《劳动法》）、《中华人民共和国劳动合同法》（以下简称《劳动合同法》）等有关法律法规的规定，甲乙双方遵循合法、公平、平等自愿、协商一致、诚实信用的原则，签订本合同，共同遵守本合同所列条款。",
            contractPeriodType: '1',
            fixedStartYear: '2025',
            fixedStartMonth: '2',
            fixedStartDay: '18',
            fixedEndYear: '2028',
            fixedEndMonth: '2',
            fixedEndDay: '18',
            indefiniteStartYear: '',
            indefiniteStartMonth: '',
            indefiniteStartDay: '',
            taskStartYear: '',
            taskStartMonth: '',
            taskStartDay: '',
            taskCompletionSign: '',
            probationType: '2',
            probationStartYear: '2025',
            probationStartMonth: '2',
            probationStartDay: '18',
            probationEndYear: '2025',
            probationEndMonth: '3',
            probationEndDay: '18',
            probationNote: "（合同期限三个月以上不满一年的，试用期不得超过一个月；合同期限在一年以上不满三年的，试用期不得超过二个月；三年以上固定期限和无固定期限的合同，试用期不得超过六个月。以完成一定工作任务为期限的合同或合同期限不满三个月的，不得约定试用期。同一用人单位与同一劳动者只能约定一次试用期。）",
            jobContent: '',
            jobLocation: '由甲方根据经营需要在公司内部各实体间安排乙方工作地点',
            additionalLocationInfo: '',
            workTimeType: '',
            standardWorkHoursPerDay: '/',
            standardWorkHoursPerWeek: '/',
            otherRestArrangements: '',
            notCompensation: [
                "在试用期间被证明不符合录用条件者；",
                "无正当理由，拒绝服从管理者合理指挥者；",
                "经常不认真工作，工作懒惰、懈怠、马虎、漫不经心或经常缺勤者（每月累计3次或半年内累计5次以上即为经常）；",
                "聚众斗殴或打人致伤者（人数5人以上或受伤人员药费200元以上）；",
                "贪污公款、盗窃公司物品或私人钱物者（该情形不限金额均为情节恶劣）；",
                "提供或使用虚假证件资料者，包括提供或使用虚假的身份证件、学历证件者、职称证件、工作经历或者借用他人职称证件者；",
                "因故意或重大过失造成公司3000元以上经济损失者；",
                "不遵守上级命令或违反安全规定，引起重大事故者；",
                "造谣惑众，破坏团结，煽动他人闹事、怠工者；",
                "利用职权或工作之便索贿受贿者；",
                "在公司内（包含厂区和宿舍）聚众赌博者；",
                "公开抵毁公司名誉和信用或利用公司名誉在外招摇撞骗，使公司受到损害者；"
            ],
            contractTerminationRules: [
                "（13）故意泄露公司商业机密或知识产权秘密，或未经许可转让公司技术、计算机软件等物品，给公司造成损害者；",
                "（14）对上级或同事进行恐吓、胁迫、暴力和其他不法行为，严重危害他人人身安全，玷污他人名誉者；",
                "（15）伪造或盗用公司印章、私人印章、签字者；",
                "（16）未经公司许可，在其他单位就职或兼营与公司同类业务者；",
                "（17）故意隐瞒错误、逃避责任、情节严重者；",
                "（18）一年内被记九次警告，或六次小过，或三次大过以上（含本数）者；",
                "（19）连续旷工三天及以上者或一年内累计旷工6天以上的；",
                "（20）被依法追究刑事责任者；",
                "（21）在外从事第二职业或其他非法经营活动者；",
                "（22）其他违反公司规章制度情节严重者。",
                "2、乙方提出解除劳动合同需提前三十天以书面形式通知公司方可生效；否则由此造成甲方损失的，由乙方赔偿。",
                "3、其他",
                "合同履行期间，乙方申请解除劳动合同的，甲方无需支付经济补偿或赔偿，甲乙双方其中一方不同意终止劳动合同，按国家相关的法律法规办理。"
            ],
            disciplinaryLevels: [
                "（1）警告；",
                "（2）小过；",
                "（3）大过；",
                "（4）调职、降级、降职或开除。"
            ],
            warningSituations: [
                "（1）上班时间在工作场所赤足、赤膊、穿拖鞋者（因工作特殊者除外）；",
                "（2）破坏工作场所或公共区域环境卫生(如:乱丢纸屑、随地吐痰等)；",
                "（3）机台、工作场所环境卫生欠佳，经指正后仍不加以改正者；",
                "（4）污写墙壁，机器设备或任意张贴文件而影响观感者；",
                "（5）因工作疏忽造成错误或督导人员不认真执行者；",
                "（6）不按规定填写报表或工作记录或上班时间未经许可私自会客或接打私人电话者；",
                "（7）上班时间不穿厂服或进出厂区及上班时间不戴厂证者；",
                "（8）无正当理由不刷考勤卡者；",
                "（9）未到下班时间，提前挤在考勤卡机边等刷考勤卡者；"
            ],
            warningSituationsContinue: [
                "（10）下班不排队，下楼梯拥挤打闹追逐者；",
                "（11）其它违反公司相关制度应给予警告处分者。"
            ],
            minorOffenseSituations: [
                "（1）对上级交办任务执行不力或处理不当，办事拖拉影响工作时效者；",
                "（2）在工作场所任意喧哗、吵闹、妨碍他人工作者；",
                "（3）对同事言语攻击、诬陷、作伪证、制造事端者；",
                "（4）在工作时间偷懒睡觉、上网聊天、阅读、浏览与本职工作无关的书报、网页及其它事件；",
                "（5）违反上级指示，言行失检，态度傲慢者；",
                "（6）未经许可私自带人入厂者；",
                "（7）遇有意外重大事件，隐瞒真实情况，不向上级及时报告者；",
                "（8）非因机械故障或原料不足因素而故意降低产量标准者；",
                "（9）私带物品出入工作场所，拒绝保安人员查询检查工作者；",
                "（10）采取谎报、虚报等手段骗取加班时数者；",
                "（11）其它违反公司制度应给予小过处罚者。"
            ],
            seriousOffenseSituations: [
                "（1）上班时间擅自离开工作岗位，影响正常工作运转者；",
                "（2）违反工作方法，严重影响生产产量及质量者；",
                "（3）报告不实记录或报表蒙蔽上级，造谣生事，散布流言，使公司蒙受重大损失者；",
                "（4）投机取巧，利用职务接受他人馈赠，以权谋私者；",
                "（5）故意破坏（公司）设备、工具或浪费材料能源，违反技术操作规程及安全卫生规程，使公司蒙受重大损失者；",
                "（6）工作时间精神散漫，且故意不按时完成工作任务，使生产流程受重大影响者；",
                "（7）因大意遗失经营管制之重要文件、机件、工具或故意撕毁公司公告，文件及造假出勤记录等者；",
                "（8）利用公司设备制作私人对象或委托他人制作，及未经许可擅自操作不属于自己份内工作使用之仪器或技术性工具等者；",
                "（9）未经许可擅自进入管制区域(有非工作人员禁止入内之标示者)；",
                "（10）上、下班代人打考勤卡者（代打卡者和被代打卡者）；",
                "（11）其它违反公司相关制度应给予大过处分者。"
            ],
            disciplinaryActionOfTransfer: [
                "1、乙方在年度内记大过两次，甲方有权对其进行调职、降级或降职处分；年度内记大过三次及以上者，一律予以开除；",
                "2、三次警告相当于记小过一次，三次记小过相当于记大过一次。",
            ],
            other: [
                "（一）若甲方向乙方按入职时提交的身份证住址邮寄信函或资料，乙方未及时查收并未向甲方做任何反馈所导致的后果全部由乙方承担。",
                "（二）本合同未尽事宜或合同条款与现行法律法规规定有抵触的，按现行法律法规执行。",
                "（三）本合同自甲乙双方签字盖章之日起生效，涂改或未经书面授权代签无效。",
                "（四）本合同一式两份，甲乙双方各执一份。"
            ],
            mode: 'add', // 添加模式标识
            isView: false // 是否为查看模式
        };
    },
    created() {
        // 从路由参数获取模式和ID
        const { mode, id } = this.$route.query;
        if (mode) {
            this.mode = mode;
            this.isView = mode === 'view';
        }
        // 如果有ID，则加载合同数据
        if (id) {
            this.loadContractData(id);
        }
    },
    methods: {
        printForm() {
            window.print()
        },
        // 加载合同数据
        async loadContractData(id) {
            try {
                const response = await getInfoApi(id);
                if (response.data) {
                    const contractData = response.data;
                    // 设置ID
                    this.id = contractData.id;

                    // 填充表单数据
                    this.employer.name = contractData.employerName;
                    this.employer.address = contractData.employerAddress;
                    this.employer.legalRepresentative1 = contractData.employerLegalRepresentative1;
                    this.employer.legalRepresentative = contractData.employerLegalRepresentative;
                    this.employer.contactPerson = contractData.employerContactPerson;
                    this.employer.contactPhone = contractData.employerContactPhone;

                    this.employee.name = contractData.employeeName;
                    this.employee.gender = contractData.employeeGender;
                    this.employee.idNumber = contractData.employeeIdNumber;
                    this.employee.address = contractData.employeeAddress;
                    this.employee.contactPhone = contractData.employeeContactPhone;

                    // 合同期限相关
                    this.contractPeriodType = contractData.contractPeriodType?.toString() || '1';

                    // 固定期限日期
                    if (contractData.fixedStartDate) {
                        const fixedStartDate = new Date(contractData.fixedStartDate);
                        this.fixedStartYear = fixedStartDate.getFullYear().toString();
                        this.fixedStartMonth = (fixedStartDate.getMonth() + 1).toString();
                        this.fixedStartDay = fixedStartDate.getDate().toString();
                    }

                    if (contractData.fixedEndDate) {
                        const fixedEndDate = new Date(contractData.fixedEndDate);
                        this.fixedEndYear = fixedEndDate.getFullYear().toString();
                        this.fixedEndMonth = (fixedEndDate.getMonth() + 1).toString();
                        this.fixedEndDay = fixedEndDate.getDate().toString();
                    }

                    // 无固定期限日期
                    if (contractData.indefiniteStartDate) {
                        const indefiniteStartDate = new Date(contractData.indefiniteStartDate);
                        this.indefiniteStartYear = indefiniteStartDate.getFullYear().toString();
                        this.indefiniteStartMonth = (indefiniteStartDate.getMonth() + 1).toString();
                        this.indefiniteStartDay = indefiniteStartDate.getDate().toString();
                    }

                    // 试用期相关
                    this.probationType = contractData.probationType?.toString() || '1';

                    if (contractData.probationStartDate) {
                        const probationStartDate = new Date(contractData.probationStartDate);
                        this.probationStartYear = probationStartDate.getFullYear().toString();
                        this.probationStartMonth = (probationStartDate.getMonth() + 1).toString();
                        this.probationStartDay = probationStartDate.getDate().toString();
                    }

                    if (contractData.probationEndDate) {
                        const probationEndDate = new Date(contractData.probationEndDate);
                        this.probationEndYear = probationEndDate.getFullYear().toString();
                        this.probationEndMonth = (probationEndDate.getMonth() + 1).toString();
                        this.probationEndDay = probationEndDate.getDate().toString();
                    }

                    // 工作内容和地点
                    this.jobContent = contractData.jobContent || '';
                    this.jobLocation = contractData.jobLocation || '由甲方根据经营需要在公司内部各实体间安排乙方工作地点';

                    // 工资相关
                    this.salary.timedSalary = contractData.timedSalary?.toString() || '';
                    this.salary.pieceworkSalary = contractData.pieceworkSalary || '';
                    this.salary.otherForm = contractData.otherSalaryForm || '';
                    this.salary.probationSalary = contractData.probationSalary?.toString() || '';
                    this.salary.paymentDate = contractData.paymentDate?.toString() || '25';

                    // 劳动保护相关
                    this.protection.workType = contractData.workType || '对身体健康无伤害';
                    this.protection.hazards = contractData.hazards || '/';
                    this.protection.measures = contractData.protectionMeasures || '/';
                    this.protection.checkTimes = contractData.healthCheckTimes?.toString() || '/';

                    // 工作时间相关
                    this.workTimeType = contractData.workTimeType?.toString() || '';
                    this.standardWorkHoursPerDay = contractData.standardWorkHoursPerDay || '/';
                    this.standardWorkHoursPerWeek = contractData.standardWorkHoursPerWeek || '/';
                    this.otherRestArrangements = contractData.otherRestArrangements || '';

                    // 福利待遇
                    this.welfare.benefits = contractData.welfareBenefits || '';
                }
            } catch (error) {
                console.error('加载合同数据失败：', error);
                this.$message.error('加载合同数据失败');
            }
        },
        back() {
            this.$router.push('/main/renshi/danganguanli');
        },
        async handleSave() {
            try {
                await saveEmployeeContract()
                this.$message.success('保存成功')
            } catch (error) {
                this.$message.error('保存失败')
            }
        },
        async handleGetDetail(id) {
            try {
                const detail = await getEmployeeContractDetail(id)
                // 可以用获取到的详情数据进行后续处理
                console.log('获取到的合同详情：', detail)
            } catch (error) {
                this.$message.error('获取详情失败')
            }
        },
        async saveContract() {
            try {
                await this.handleSave()
                // 保存成功后的其他操作
            } catch (error) {
                // 错误处理
            }
        },
        async getContractDetail() {
            try {
                const contractId = 1 // 要查询的合同ID
                await this.handleGetDetail(contractId)
                // 获取成功后的其他操作
            } catch (error) {
                // 错误处理
            }
        },
        // 处理表单提交
        async handleSubmit() {
            try {
                // 构造合同数据
                const contractData = {
                    id: this.id,
                    contractTitle: this.contractTitle,
                    employerName: this.employer.name,
                    employerAddress: this.employer.address,
                    employerLegalRepresentative1: this.employer.legalRepresentative1,
                    employerLegalRepresentative: this.employer.legalRepresentative,
                    employerContactPerson: this.employer.contactPerson,
                    employerContactPhone: this.employer.contactPhone,
                    employeeName: this.employee.name,
                    employeeGender: this.employee.gender,
                    employeeIdNumber: this.employee.idNumber,
                    employeeAddress: this.employee.address,
                    employeeContactPhone: this.employee.contactPhone,
                    contractPeriodType: parseInt(this.contractPeriodType),
                    fixedStartDate: this.fixedStartYear ? formatDate(`${this.fixedStartYear}-${this.fixedStartMonth}-${this.fixedStartDay}`, DATE_FORMAT.YYYY_MM_DD) : null,
                    fixedEndDate: this.fixedEndYear ? formatDate(`${this.fixedEndYear}-${this.fixedEndMonth}-${this.fixedEndDay}`, DATE_FORMAT.YYYY_MM_DD) : null,
                    indefiniteStartDate: this.indefiniteStartYear ? formatDate(`${this.indefiniteStartYear}-${this.indefiniteStartMonth}-${this.indefiniteStartDay}`, DATE_FORMAT.YYYY_MM_DD) : null,
                    probationType: parseInt(this.probationType),
                    probationStartDate: this.probationStartYear ? formatDate(`${this.probationStartYear}-${this.probationStartMonth}-${this.probationStartDay}`, DATE_FORMAT.YYYY_MM_DD) : null,
                    probationEndDate: this.probationEndYear ? formatDate(`${this.probationEndYear}-${this.probationEndMonth}-${this.probationEndDay}`, DATE_FORMAT.YYYY_MM_DD) : null,
                    jobContent: this.jobContent,
                    jobLocation: this.jobLocation,
                    timedSalary: this.salary.timedSalary ? parseFloat(this.salary.timedSalary) : null,
                    pieceworkSalary: this.salary.pieceworkSalary,
                    otherSalaryForm: this.salary.otherForm,
                    probationSalary: this.salary.probationSalary ? parseFloat(this.salary.probationSalary) : null,
                    paymentDate: this.salary.paymentDate ? parseInt(this.salary.paymentDate) : null,
                    workType: this.protection.workType,
                    hazards: this.protection.hazards,
                    protectionMeasures: this.protection.measures,
                    healthCheckTimes: this.protection.checkTimes !== '/' ? parseInt(this.protection.checkTimes) : null
                };

                // 表单验证
                if (!this.validateForm(contractData)) {
                    return;
                }

                // 调用保存接口
                const response = await saveOrUpdateApi(contractData);
                if (response.data) {
                    this.$message.success('合同保存成功');
                    // 返回列表页
                    this.$router.push('/main/renshi/danganguanli/yghetong/yghetongList');
                }
            } catch (error) {
                console.error('保存合同失败：', error);
                this.$message.error('保存合同失败，请检查数据后重试');
            }
        },
        // 表单验证
        validateForm(data) {
            // 必填字段验证
            if (!data.employerName) {
                this.$message.warning('请填写用人单位名称');
                return false;
            }
            if (!data.employeeName) {
                this.$message.warning('请填写员工姓名');
                return false;
            }
            if (!data.employeeIdNumber) {
                this.$message.warning('请填写员工身份证号码');
                return false;
            }
            if (!data.jobContent) {
                this.$message.warning('请填写工作内容');
                return false;
            }
            if (!data.timedSalary && !data.pieceworkSalary && !data.otherSalaryForm) {
                this.$message.warning('请至少填写一种工资形式');
                return false;
            }
            return true;
        }
    }
};
</script>

<style scoped>
.contract-container {
    width: 210mm;
    margin: 0 auto;
    font-family: '宋体';
    box-sizing: border-box;
}

.back-button {
    position: fixed;
    top: 10px;
    left: 10px;
    cursor: context-menu;
}

.page1 {
    width: 210mm;
    height: 297mm;
    padding: 20mm;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    page-break-after: always;
    text-align: left;
    background-color: white;
}

.page {
    width: 210mm;
    height: 297mm;
    padding: 20mm;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    page-break-after: always;
    text-align: left;
    line-height: 29.3326px;
    letter-spacing: 0.1039em;
    margin-top: 20px;
    background-color: white;
}

.contract-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
    letter-spacing: 15px;
}

.contract-logo {
    display: flex;
    justify-content: center;
}

.contract-info {
    display: flex;
    margin-top: 50px;
}

.info-group {
    width: 48%;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 5px;
    font-size: 12px;
    text-align: left;
    line-height: 25px;
}

.info-group p {
    margin: 5px 0;
    max-width: 230px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
}

.info-group input {
    font-size: 12px;
    width: 100%;
    text-align: left;
}

p {
    font-size: 12px;
    text-indent: 2.5em;
}

.compiled-by {
    font-size: 22px;
    color: #666;
    margin-top: 75px;
    letter-spacing: 10px;
    text-align: center;
}

.section-intro {
    text-indent: 2.5em;
}

.section {
    /* margin-bottom: 30px; */
}

.section h2 {
    font-size: 12px;
    /* 统一章节标题字体大小，看起来更协调 */
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    text-indent: 2.4em;
}

.sub-title {
    text-indent: 5em !important;
    text-decoration: underline;
}

.title {
    text-decoration: underline;
}

.sub-section {
    /* margin-bottom: 20px; */
}

ol {
    padding-left: 70px;
    font-size: 12px;
}

.highlight {
    /* font-weight: bold; */
    font-size: 12px;
    border-bottom: 1px solid #000;
}

.disabled-input {
    /* text-decoration: line-through; */
    /* //删除线 */
}

input[type="number"] {
    font-size: 12px;
}

.note {
    font-size: 12px;
}

.content-item {
    /* margin-bottom: 15px; */
    font-size: 12px;
}

/* // 自定义列表样式(1) */
.custom-list {
    list-style-type: none;
    /* 去掉默认的序号 */
    counter-reset: custom-counter;
    /* 初始化计数器 */
    padding-left: 60px;
}

.custom-list li {
    counter-increment: custom-counter;
    /* 每个列表项递增计数器 */
}

.custom-list li::before {
    content: "(" counter(custom-counter) ") ";
    /* 在每个列表项前加上括号和序号 */
}


.value {
    /* font-weight: bold; */
    border-bottom: 1px solid #000;
}

@media print {
    .operation-buttons {
        display: none;
    }

    .back-button {
        display: none;
    }

    .page1 {

        width: 210mm;
        height: 297mm;
        margin: 0;
        padding: 20mm;
        border: none;
        box-shadow: none;
        box-sizing: border-box;
    }

    .page {
        width: 210mm;
        height: 297mm;
        margin: 0;
        padding: 20mm;
        border: none;
        box-shadow: none;
        box-sizing: border-box;
    }
}

input {
    border: 0px;
    border-bottom: 1px solid #000;
    font-family: '宋体';
    font-size: 12px;
}

.underline-text {
    text-decoration: underline;
}

.operation-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}
</style>